<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <style>
      *{
        margin:0;
        padding:0;
      }
      svg{
         width:800px;height:800px;
         border:1px solid #ccc;
      }

    </style>
  </head>
  <body>
    <!-- 可以在style 里设置 width height   -->
     <svg>
        <!-- x1 yi 第一个点坐标 x2 y2 第二点坐标  -->
        <line x1= '100' y1 ='100' x2='200' y2='200' stroke="red" stroke-width="20"></line>
        <line x1= '100' y1 ='200' x2='200' y2='100' stroke="red"></line>
        <!-- 折线 -->
        <polyline points="300 300,50 100, 120 400,300 300" fill-opacity='0' stroke="cyan"></polyline>
        <!--矩形 -->
        <rect x='400' y="400" width="150" height="50" fill="blue"></rect>
        <!-- 圆形 -->
        <circle cx='370' cy="95" r="50" style="stroke:red;fill:none"></circle>
        <!-- 圆形 | 椭圆 -->
        <ellipse cx='500' cy="500" rx="100" ry="50" style="stroke:blue;fill:red"></ellipse>
        <!-- 多边形 -->
        <polygon points="600 300,50 500, 120 400,600 300" fill-opacity='0' stroke="cyan"></polygon>
        <!-- 任意图形 -->
        <path d="M  50 50 L 60 80 L 120 300 L 55 90 L 190 330 L 290 80 Z" fill-opacity='0' stroke="cyan"></path>
     </svg>
     <script>
       
     </script>
  </body>
</html>
